<template>
  <view class="bg-white py-16 px-12 text-color-regular fs-14" :class="$attrs" @click="toDetail">
    <view class="flex justify-between item-center mb-8">
      <text></text>
      <!-- <text class="text-color-hint fs-14">{{data.createTime}}</text> -->
      <text class="text-bold" :style="`color:${activeStateDict[data.activeState].color}`">{{activeStateDict[data.activeState].text}}</text>
    </view>
    <view v-if="photos" class="mb-12 flex">
      <!--
			<template v-if="photos.length > 1">
				<block v-for="(item, i) in photos.filter((_,i) => i < 3)" :key="item">
					<video v-if="isVideoFile(item)" class="overflow-hidden radius-8" :class="i===2?'':'mr-6'" style="width:calc((100% - 12px)/3);height:105px;" :src="item"></video>
					<image v-else class="overflow-hidden radius-8" :class="i===2?'':'mr-6'" mode="aspectFill" style="width:calc((100% - 12px)/3);height:105px;" :src="item"></image>
				</block>
			</template>
			<block v-else-if="photos.length === 1">
				<video v-if="isVideoFile(photos[0])" class="radius-8 w-full overflow-hidden" style="height:105px;" :src="photos[0]"></video>
				<image v-else class="radius-8 w-full overflow-hidden" style="height:105px;" mode="aspectFill" :src="photos[0]"></image>
			</block>
			-->
      <!-- 活动列表默认显示单图（显示活动图片首张图片）-->
      <image class="radius-8 w-full overflow-hidden" style="height:212px;" mode="aspectFill" :src="coverPicture"></image>
    </view>
    <view class="mb-8 two-lines-ellipsis">
      <!-- <sign-up-tag v-if="isSignUp" class="mr-8" /> -->
      <tag v-if="data.promotionLabel" class="mr-4">{{ data.promotionLabel }}</tag>
      <text class="text-bold align-middle">{{data.activeTitle}}</text>
    </view>
    <view class="flex item-center mb-12">
      <text class="color-primary">¥</text><text class="color-primary fs-21 text-bold mr-8">{{data.activePrice}}</text>
      <newcomer-coupon-tag v-if="data.activeRedPacket" :price="data.activeRedPacket.firstRedPacketAmt" class="mr-10" />
      <template v-if="data.activeDiscount && data.activeDiscount.length <= 2">
        <full-discount-tag v-for="(item,index) in data.activeDiscount" :key="index" :data="item" class="mr-10" />
      </template>
    </view>
    <view v-if="data.activeDiscount && data.activeDiscount.length===3" class="mb-12">
      <full-discount-tag v-for="(item,index) in data.activeDiscount" :key="index" :data="item" class="mr-10" />
    </view>
    <view v-if="isSignUp && activityInfo.activeStepPrices && activityInfo.activeStepPrices.length" class="mt-8 mb-12">
      <sign-up-number-tag v-for="(item,index) in activityInfo.activeStepPrices" :key="index" :number="item.enrollNum" :price="numberFormat(activityInfo.activePrice - item.enrollPrice,2)" :type="2" class="mr-8" />
    </view>
    <view class="py-4 mb-12">
      <view class="flex item-center justify-between">
        <view v-if="data.commissionAmt" class="inline-flex item-center px-8 py-2 fs-12 radius-14 bg-pale-yellow border-secondary-warning">
          佣金: <text class="color-primary fs-14">¥{{data.commissionAmt}}</text>
        </view>
        <view v-else></view>
        <view class="flex item-center ml-6" v-if="data.otherEquity" @click.stop="showEquity">
          <image class="size-16 mr-2" src="@/static/image/icon-value-share.png"></image>
          <text class="color-primary text-underline fs-12">查看权益</text>
        </view>
      </view>
      <view class="inline-flex item-center px-8 py-4 radius-20 bg-default mt-8" style="color:#858585;">
        <text>{{data.browseNum + data.virtualSaleNum * data.virtualNum}}人查看</text>
        <text>｜</text>
        <text>已售{{data.buyNum + (data.virtualSaleNum?data.virtualSaleNum:0)}}份</text>
      </view>
    </view>
    <template v-if="isYourSelf">
      <view class="flex justify-end item-center">
        <view class="border-primary flex center px-8 py-4 radius-8 ml-8 fs-12 color-primary" @click.stop="toDelete">
          <image class="size-16 mr-4" src="@/static/svg/icon-delete.svg"></image>
          <text>删除</text>
        </view>
        <view v-if="[1,2].includes(data.activeState)" class="border-secondary-warning flex center px-8 py-4 radius-8 ml-8 fs-12 color-secondary-warning" @click.stop="toEdit">
          <image class="size-16 mr-4" src="@/static/svg/icon-edit.svg"></image>
          <text>修改</text>
        </view>
        <view v-if="data.activeState===1" class="border-secondary-success flex center px-8 py-4 radius-8 ml-8 fs-12 color-secondary-success" @click.stop="toPublish">
          <image class="size-16 mr-4" src="@/static/svg/icon-publish.svg"></image>
          <text>发布</text>
        </view>
        <image v-if="data.activeState===3" class="size-24 ml-12" src="@/static/svg/icon-relay.svg" @click.stop="toShare"></image>
      </view>
      <!-- <view v-if="[3,4].includes(data.activeState)" class="mt-12 fs-12 text-color-hint">
				<view class="flex">
					<view style="width:40%;">成交量: {{data.tradeNum}}</view>
					<text>成交金额: ¥{{data.tradeAmt}}</text>
				</view>
				<view class="flex mt-4">
					<view style="width:40%;">分销订单量: {{data.distributeOrderNum}}</view>
					<text>分销佣金: ¥{{data.distributeOrderAmt}}</text>
				</view>
				<view class="flex mt-4">
					<view style="width:40%;">购买人数: {{data.buyNum}}</view>
					<text>查看人数: {{data.browseNum}}</text>
				</view>
			</view> -->
    </template>
    <share-activity :id="data.id" :show="showSharePopup" @onClose="showSharePopup=false" :options="{groupBuyLabel:data.promotionLabel}" />
    <EquityDialog ref="equityDialogRef" :commissionAmt="data.commissionAmt" :commissionRate="data.commissionRate" :otherEquity="data.otherEquity" :defaultCommissionType="data.defaultCommissionType" />
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { businessActiveDeleteApi } from '@/api/business.js'
import { useActivity } from '@/hooks/useActivity.js'
import { useUserStore } from '@/stores/modules/user.js'
import { isVideoFile, numberFormat, modelShowToastAsync, reformatDatetime } from '@/utils/index.js'
import FullDiscountTag from '@/components/full-discount-tag/full-discount-tag.vue'
import EquityDialog from '@/components/equity-dialog/equity-dialog.vue'
import Tag from '@/components/tag/tag.vue'

const userStore = useUserStore()

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  isYourSelf: {
    type: Boolean
  }
})

const emits = defineEmits(['onDelete'])
const equityDialogRef = ref()
const showEquity = () => {
  equityDialogRef.value && equityDialogRef.value.showDialog(true)
}
const { isSignUp, photos, coverPicture, activityInfo } = useActivity(props.data)

const activeStateDict = {
  1: {
    text: '未发布',
    color: '#FCB513',
  },
  2: {
    text: '未开始', // 已发布，活动未开始
    color: '#00AEFF',
  },
  3: {
    text: '进行中',
    color: '#00AEFF',
  },
  4: {
    text: '已结束',
    color: 'rgba(51, 51, 51, 0.60)',
  },
}

const editAble = computed(() => data.activeState === 1)

const toEdit = () => {
  uni.navigateTo({
    url: `/pagesG/publish/create-activity?id=${props.data.id}&from=merchant`
  })
}

const toDetail = () => {
  const url = props.data.promotionType === 'GROUP_BUY'
    ? `/pagesB/activity/activity-group-buy`
    : `/pagesB/activity/activity`;
  uni.navigateTo({
    url: `${url}?id=${props.data.id}&_from=merchant_activityListItem`
  })
}

const toOrder = () => {
  uni.navigateTo({
    // url: '/pages/order/order'
    url: '/pages/home/home?tab=1'
  })
}

const toDelete = async () => {
  const canDel = !props.data.validEndTime || (new Date() - new Date(reformatDatetime(props.data.validEndTime))) > 0 || [1, 2].includes(props.data.activeState);
  if (!canDel) {
    await modelShowToastAsync({ content: '核销有效期未结束，不能删除！', confirmText: '知道了', confirmColor: '#FA4543', showCancel: false });
    return;
  }
  uni.showModal({
    confirmColor: '#FA4543',
    confirmText: '确定删除',
    content: '删除后无法查看、导出该活动订单，确定删除吗？',
    success: (res) => {
      if (res.confirm) {
        businessActiveDeleteApi(props.data.id).then(res => {
          uni.showToast({
            title: '删除成功',
            icon: 'none'
          })
          emits('onDelete')
        })
      }
    }
  })
}

const toPublish = () => {
  uni.navigateTo({
    url: `/pagesG/publish/create-activity?id=${props.data.id}&from=merchant`
  })
}

const showSharePopup = ref(false)
const toShare = () => {
  if (userStore.isLogin) {
    showSharePopup.value = true
  } else {
    uni.navigateTo({
      url: `/pagesA/login/login?from=${encodeURIComponent(`/pagesA/merchant/homepage?id=${props.data.id}`)}`
    })
  }
}
</script>
